WP Quickie: Adding Chrome Voice Search
Saw this post about Chrome voice searching in HTML forms on Google’s blog today. Very cool, so I had to give it a try. If you check the “Search” box in the upper right corner of the page, you’ll see a little icon (if you’re using a dev version of Chrome). Click it to do a search-by-voice.
What I didn’t expect was how totally easy it is to implement. Seriously, it’s less than a line of code.
Example. Say your search box (possibly in your theme’s searchform.php file) looks like this:
<form id="searchform" action="<?php bloginfo('home'); ?>/" method="get">
<input id="s" name="s" size="20" type="text" value="<?php _e('Search') ?>..." />
</form>
All you have to do is to add some bits to the input element box. Specifically, you add x-webkit-speech speech onwebkitspeechchange=”this.form.submit();”. That’s it. Seriously:
<form id="searchform" action="<?php bloginfo('home'); ?>/" method="get">
<input id="s" name="s" size="20" type="text" value="<?php _e('Search') ?>..." x-webkit-speech speech onwebkitspeechchange="this.form.submit();" />
</form>
Note that this won’t validate, if you care about that sort of thing. Works fine though.
You can do a whole lot more with Javascript and events and translations and multiple choices and such, if you’re thinking of developing something cool with it. I’m just shocked and amazed that this is already in my browser and I had no idea it was there. Very cool.
[…] Do you have a WordPress blog? Do you want to add voice search to your blog? Well, thanks to Otto the Tech Ninja, you can with just a slight modification to your theme! […]
Ha! That is way too easy! Thanks for finding and documenting this.
It did take me a couple of tries to get it right. I accidentally added the extra bits to my “submit” button instead of the input field. Once I corrected that, it worked, easy peasy.
Thanks again. 🙂
Brent – Did you add the code before or after the submit button?
Thanks.
Neither. You add the code to the search input field itself. The example seems pretty clear to me. What part of it is not clear? I’ll change it to clarify, if needed. 🙂
Oops! Looks like my last comment added more confusion than enlightenment. Let me try again.
Otto’s before and after listings show the change pretty clearly. But his search form only has a text input element. Mine has both the text input element and a submit button element. Add the extra bits within the text input element, before the closing angle bracket.
Don’t forget, you’ll need to be using the Chrome browser (and the dev version, according to the post) to see any effect.
Good luck!
Quick question – if this is webkit based, does this imply it may work for android device voice search also?
Good question. Let me know if you find out the answer (I don’t have an Android device).
I know this post is over a year old, but I wanted to let anyone who might come across it know: I just added this functionality to my site, it works fine in Chrome, but does not work on Android. I tested it with the default Android browser, Opera Mini, and Dolphin Browser HD.
One caveat – I’m using a Motorola Triumph, which unfortunately is still using Android 2.2 Froyo. It may work in newer versions.
[…] via Otto on WordPress […]
[…] him, and squeeze him! http://www.youtube.com/watch?v=2JlVqfC8-UI) What’s cool? Andy P — Voice Search in Google Chrome – now live on eightbar, Dogear Nation and mqtt sites Michael R — News Anchor 2 avatar […]
I took a couple of seconds to set this up. Very funny when you try to search in Swedish (for the moment it seems it’s US english only). However, it’s pretty darn cool and useful to in some cases.
Seems broken on Chrome 8.0.552.237 (Mac). It did work. But it don’t. Oh well.
Same here. Added the feature, worked for a while, now it doesn’t. Anyone know if there’s a fix?
Still works for me on the latest Chrome on Windows.
[…] Adding Chrome Voice Search […]
[…] Adding Chrome Voice Search » Otto on WordPress […]
[…] I stumbled upon a small article by Otto — well known in the WordPress world — talking about a currently still little known […]
does it’s not burden the page loading?
No, but this does not work anymore. Javascript has a web speech API you should use instead.